<template>
  <view class="container">
    <view class="header">
      <text class="title">主题设置</text>
      <text class="subtitle">选择你喜欢的主题色彩</text>
    </view>
    
    <view class="theme-grid">
      <view 
        v-for="(theme, key) in themeConfig" 
        :key="key"
        class="theme-item"
        :class="{ active: currentTheme === key }"
        @click="switchTheme(key)"
      >
        <view class="theme-preview">
          <view class="color-block primary" :style="{ backgroundColor: theme.primary }"></view>
          <view class="color-block accent" :style="{ backgroundColor: theme.accent }"></view>
        </view>
        <text class="theme-name">{{ theme.name }}</text>
        <view v-if="currentTheme === key" class="check-icon">
          <uni-icons type="checkmarkempty" size="20" color="#fff" />
        </view>
      </view>
    </view>
    
    <view class="preview-section">
      <text class="section-title">主题预览</text>
      <view class="preview-card card">
        <view class="preview-header">
          <text class="preview-title text-primary">主题预览卡片</text>
          <uni-tag text="标签" type="primary" size="mini" />
        </view>
        <text class="preview-desc text-secondary">这是一个主题预览卡片，展示了当前主题的色彩效果。</text>
        <view class="preview-buttons">
          <button class="btn-primary">主要按钮</button>
          <button class="btn-outline">次要按钮</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { themeConfig, getCurrentTheme, setTheme } from '@/utils/theme.js'

export default {
  data() {
    return {
      themeConfig,
      currentTheme: 'default'
    }
  },
  onLoad() {
    this.currentTheme = getCurrentTheme()
  },
  methods: {
    switchTheme(themeName) {
      if (setTheme(themeName)) {
        this.currentTheme = themeName
        uni.showToast({
          title: '主题切换成功',
          icon: 'success'
        })
      }
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #ffffff;
  min-height: 100vh;
  padding: var(--spacing-md);
}

.header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: var(--text-primary);
  display: block;
  margin-bottom: var(--spacing-xs);
}

.subtitle {
  font-size: 28rpx;
  color: var(--text-secondary);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.theme-item {
  background-color: var(--bg-primary);
  border-radius: var(--radius-large);
  padding: var(--spacing-md);
  text-align: center;
  position: relative;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.theme-item.active {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-medium);
}

.theme-preview {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
}

.color-block {
  width: 60rpx;
  height: 60rpx;
  border-radius: var(--radius-medium);
  margin: 0 var(--spacing-xs);
}

.theme-name {
  font-size: 28rpx;
  color: var(--text-primary);
  font-weight: 500;
}

.check-icon {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background-color: var(--primary-color);
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-section {
  margin-top: var(--spacing-lg);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  display: block;
}

.preview-card {
  padding: var(--spacing-lg);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.preview-title {
  font-size: 32rpx;
  font-weight: bold;
}

.preview-desc {
  font-size: 28rpx;
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
}

.preview-buttons {
  display: flex;
  gap: var(--spacing-sm);
}

.preview-buttons button {
  flex: 1;
  height: 80rpx;
  font-size: 28rpx;
}
</style> 